import React, { useEffect } from 'react'
import {getShopcartListAsync,changeNumAsync} from '@/store/async/shopcartAsync'

import { useDispatch, useSelector } from 'react-redux'


export default function ShopCart() {
  const dispatch=useDispatch()
  const list=useSelector((state)=>{
    return state.gouwuche.shopcartList
  })
  useEffect(()=>{
    dispatch(getShopcartListAsync)
  },[])
 
  const changeNum=(_id,n)=>{
    dispatch(changeNumAsync({_id,n}))

  }
  return (
    <div>
      <h2>购物车列表</h2>
      <table>
        <thead>
          <tr>
            <td>编号</td>
            <td>名称</td>
            <td>价格</td>
            <td>数量</td>
            <td>小计</td>
          </tr>
        </thead>
        <tbody>
           {
             list.map((item,index)=> <tr key={item._id}>
              <td>{item._id}</td>
              <td>{item.name}</td>
              <td>{item.price}</td>
              <td>
                <button>-</button>
                {item.num}
                <button onClick={()=>{changeNum(item._id,1)}}>+</button>
              </td>
              <td>{item.price*item.num}</td>
             </tr>)
           }
        </tbody>
      </table>
    </div>
  )
}
